<template>
  <div>
    <el-table :data="myChartList">
      <el-table-column label="名称" width="200" prop="chart_name" align="center" />
      <el-table-column label="描述" prop="desc" align="center" />
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="switchChart(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="deleteChart(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { chartList, deleteChart } from "@/api/chart";
export default {
  data() {
    return {
      myChartList: []
    };
  },
  created() {
    this.viewAllChart();
  },
  methods: {
    switchChart(chart) {
      // console.log(chart)
      this.$confirm(
        "确定要离开当前页面吗?系统可能不会保存您所做的更改。",
        "提示"
      ).then(() => {
        this.$router.replace(`/chartpanel/${chart.chart_id}`);
        this.showMyCharts = false;
      });
    },
    viewAllChart() {
      this.showMyCharts = true;
      chartList().then(resp => {
        this.myChartList = resp.data;
      });
    },
    deleteChart(chart) {
      this.$confirm(`确定要删除图表：${chart.chart_name}？`, "提示").then(
        () => {
          deleteChart({ chart_id: chart.chart_id }).then(() => {
            if (this.$route.params.id === chart.chart_id) {
              this.$router.push("/chartpanel/create");
              this.showMyCharts = false;
            } else {
              this.viewAllChart();
            }
            this.$message({
              type: "success",
              message: "删除成功！"
            });
          });
        }
      );
    }
  }
};
</script>